<template>
  <el-row id="prolem-add-box">
    <Breadcrumb :breadcrumb="breadcrumb"/>

    <el-row id="filter-box">
      <el-col :span="6" id="problem-type-box">
        <el-row>
          <el-col :span="4">
            <label class="tag1">类型:</label>
          </el-col>
          <el-select v-model="typeValue" placeholder="请选择题型">
            <el-option
              v-for="item in Type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-row>
      </el-col>
      <el-col :span="6" id="problem-label-box">
        <el-col :span="4">
          <label class="tag1">难度:</label>
        </el-col>
        <el-row>
          <el-col :span="20" class="radio-group">
            <el-select v-model="difficultyValue" placeholder="请选择难度">
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
<!-- 选择题 -->
<el-row id="ProblemAddForm-box" v-if="typeValue == '选择题'">
  <el-form label-position="left" label-width="100px" id="ProblemAddForm" class="demo-ruleForm">
        <el-form-item>
          <el-row id="examAddForm-button-box">
          <el-col :span="4" :offset="20">
            <el-button
              id="auditButton"
              class="buttonStyle1"
              type="primary"
              @click="SubmitInsertChoiceButton"
              round
              >提交</el-button>
          </el-col>
        </el-row>
        </el-form-item>   
        <el-form-item label="题目">
          <el-input type="textarea" :rows="3" v-model="choiceProblem"   placeholder="请输入题目内容"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="选项A">
              <el-col :span="10">
                <el-input v-model="choiceOp1"   placeholder="请输入选项A内容"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选项B" >
              <el-col :span="10">
                <el-input v-model="choiceOp2"  placeholder="请输入选项B内容"></el-input>
              </el-col> 
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选项C" >
              <el-col :span="10">
                <el-input v-model="choiceOp3"  placeholder="请输入选项C内容"></el-input>
              </el-col> 
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="选项D" >
              <el-col :span="10">
                <el-input v-model="choiceOp4"  placeholder="请输入选项D内容"></el-input>
              </el-col> 
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="答案" prop="resource">
          <el-radio-group v-model="choiceAnsw">
            <el-radio label="A">A</el-radio>
            <el-radio label="B">B</el-radio>
            <el-radio label="C">C</el-radio>
            <el-radio label="D">D</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="解析">
          <el-input type="textarea" :rows="3" v-model="choiceParse"   placeholder="请输入题目解析"></el-input>
        </el-form-item>
  </el-form> 
</el-row>

<!-- 简答题 -->
<el-row id="ProblemAddForm-box" v-if="typeValue == '简答题'">
  <el-form label-position="left" label-width="100px" id="ProblemAddForm" class="demo-ruleForm">
        <el-form-item>
          <el-row id="examAddForm-button-box">
          <el-col :span="4" :offset="20">
            <el-button
              id="auditButton"
              class="buttonStyle1"
              type="primary"
              @click="SubmitInsertEssayButton"
              round
              >提交</el-button>
          </el-col>
        </el-row>
        </el-form-item>   
        <el-form-item label="题目">
          <el-input type="textarea" :rows="3" v-model="essayProblem"   placeholder="请输入题目内容"></el-input>
        </el-form-item>
        <el-form-item label="答案">
          <el-input type="textarea" :rows="3" v-model="essayAnsw"   placeholder="请输入题目答案"></el-input>
        </el-form-item>
        <el-form-item label="解析">
          <el-input type="textarea" :rows="3" v-model="essayParse"   placeholder="请输入题目解析"></el-input>
        </el-form-item>
  </el-form> 
</el-row>   

  
<!-- 判断题 -->
<el-row id="ProblemAddForm-box" v-if="typeValue == '判断题'">
  <el-form label-position="left" label-width="100px" id="ProblemAddForm" class="demo-ruleForm">
        <el-form-item>
          <el-row id="examAddForm-button-box">
          <el-col :span="4" :offset="20">
            <el-button
              id="auditButton"
              class="buttonStyle1"
              type="primary"
              @click="SubmitInsertTrueOrFalseButton"
              round
              >提交</el-button>
          </el-col>
        </el-row>
        </el-form-item>   
        <el-form-item label="题目">
          <el-input type="textarea" :rows="3" v-model="trueOrFalseProblem"   placeholder="请输入题目内容"></el-input>
        </el-form-item>
        <el-form-item label="答案">
          <el-radio-group v-model="trueOrFalseAnsw">
            <el-radio label="对">对</el-radio>
            <el-radio label="错">错</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="解析">
          <el-input type="textarea" :rows="3" v-model="trueOrFalseParse"   placeholder="请输入题目解析"></el-input>
        </el-form-item>
  </el-form> 
</el-row>

 </el-row>
</template>
<script>
import Breadcrumb from '@/components/common/Breadcrumb'
import { mapState } from 'vuex'
export default {
  name: "ProblemAdd",
  components: {
    Breadcrumb,
  },
  data() {
    return {
      breadcrumb:[
        {name:"题目管理",path:"problem"},
        {name:"题目添加",path:""},
      ],
      Type: [
        {
          value: "选择题",
          label: "选择题"
        },
        {
          value: "判断题",
          label: "判断题"
        },
        {
          value: "简答题",
          label: "简答题"
        }
      ],
      typeValue: "选择题",
      difficulty: [
        {
          value: "简单",
          label: "简单"
        },
        {
          value: "中等",
          label: "中等"
        },
        {
          value: "困难",
          label: "困难"
        }
      ],
      difficultyValue: "简单",
      // 选择题数据
      choiceProblem: "",
      choiceOp1: "",
      choiceOp2: "",
      choiceOp3: "",
      choiceOp4: "",
      choiceAnsw: "",
      choiceParse: "",

      //简答题数据
      essayProblem:"",
      essayAnsw:"",
      essayParse:"",

      //判断题数据
      trueOrFalseProblem:"",
      trueOrFalseAnsw:"",
      trueOrFalseParse:""



    };
  },
  methods: {

    //增加选择题
    SubmitInsertChoiceButton() {
      if (!this.checkChoiceForm()) return;
      this.axios.post("/choice/add", {
        courseName: this.course.courseName,
        typeName: this.typeValue,
        choiceProblem: this.choiceProblem,
        choiceOp1: this.choiceOp1,
        choiceOp2: this.choiceOp2,
        choiceOp3: this.choiceOp3,
        choiceOp4: this.choiceOp4,
        choiceAnsw: this.choiceAnsw,
        choiceParse: this.choiceParse,
        choiceDifficulty: this.difficultyValue
      }).then((response)=>{
            if(response.data.code==200){
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
            }else if(response.data.code==500){
                  this.$message({
                  type: 'fail',
                  message: '添加失败!'
                });
            }
        })
    },
    //增加简答题
    SubmitInsertEssayButton(){
      if (!this.checkEssayForm()) return;
        this.axios.post("/essay/add",{
        courseName: this.course.courseName,
        typeName: this.typeValue,
        essayProblem : this.essayProblem,
        essayAnsw : this.essayAnsw,
        essayParse : this.essayParse,
        essayDifficulty : this.difficultyValue
        }).then((response)=>{
            if(response.data.code==200){
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
            }else if(response.data.code==500){
                  this.$message({
                  type: 'fail',
                  message: '添加失败!'
                });
            }
        })
    },
    //增加判断题
    SubmitInsertTrueOrFalseButton(){
      if (!this.checkTrueOrFalseForm()) return;
       this.axios.post("/trueOrFalse/add",{
        courseName: this.course.courseName,
        typeName: this.typeValue,
        trueOrFalseProblem: this.trueOrFalseProblem,
        trueOrFalseAnsw:this.trueOrFalseAnsw,
        trueOrFalseParse:this.trueOrFalseParse,
        trueOrFalseDifficulty : this.difficultyValue
       }).then((response)=>{
            if(response.data.code==200){
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
            }else if(response.data.code==500){
                  this.$message({
                  type: 'fail',
                  message: '添加失败!'
                });
            }
        })

    },

    checkTrueOrFalseForm(){
      if (!this.trueOrFalseProblem) {
        this.$message("题目内容不能为空");
        return false;
      }
      if (!this.trueOrFalseAnsw) {
        this.$message("答案不能为空");
        return false;
      }
      if (!this.trueOrFalseParse) {
        this.trueOrFalseParse = "暂无解析";
        return true;
      }
      return true;      
    },    

    checkEssayForm(){
      if (!this.essayProblem) {
        this.$message("题目内容不能为空");
        return false;
      }
      if (!this.essayAnsw) {
        this.$message("答案不能为空");
        return false;
      }
      if (!this.essayParse) {
        this.essayParse = "暂无解析";
        return true;
      }
      return true;      
    },

    checkChoiceForm() {
      if (!this.choiceProblem) {
        this.$message("题目内容不能为空");
        return false;
      }
      if (!this.choiceOp1) {
        this.$message("选项A不能为空");
        return false;
      }
      if (!this.choiceOp2) {
        this.$message("选项B不能为空");
        return false;
      }
      if (!this.choiceOp3) {
        this.$message("选项C不能为空");
        return false;
      }
      if (!this.choiceOp4) {
        this.$message("选项D不能为空");
        return false;
      }
      if (!this.choiceAnsw) {
        this.$message("答案不能为空");
        return false;
      }
      if (!this.choiceParse) {
        this.choiceParse = "暂无解析";
        return true;
      }
      return true;
    }
  },
  computed:{
    ...mapState('course', {
        course:'course',
    }),
  },
};
</script>
<style scoped>
#prolem-add-box{
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  background-color: #f6fafb !important;

  height: 680px;
}
#ProblemAddForm-box{
  padding-top: 30px;
  padding-left: 35px;
  padding-right: 35px;
  padding-bottom: 20px;
}
#ProblemAddForm{
  padding-top: 30px;
  padding-left: 35px;
  padding-right: 35px;
  padding-bottom: 20px;
  
}

.buttonStyle1 {
  width: 100px;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-left: 15px;
}
#breadcrumb{
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdfe6 !important;
  margin-bottom: 30px;
}
.box{
   margin-top: 5%;  
}
/* #elrow{
  margin: 5px 0px;
} */
/* #filter-box {

  height: 40px;
  margin-left: 10%;
 
} */
/* #filter1-box{
    margin-left: 10%;

} */
/* .tag1 {
  font-weight: normal;
  line-height: 40px;
  margin-bottom: 0px;
}

.radio-group {
  display: block;
  line-height: 40px;
} */
.el-radio-group {
  height: 16px;
}
#el-but{
display: block;
 margin-left: 35%;
}

/* 自定义的样式 */
</style>
<style>
.el-button--primary {
    color: #FFF;
    background-color: #5677fc;
    border-color: #5677fc;
}
#prolem-add-box .el-form {
    background-color: #ffffff;
}
/* .el-row{
  border: 1px solid yellow;
} */
/* 修改element-ui的样式 */
</style>